<template>
	<view class="p-top30 p-bot30">
		<!-- #ifdef MP-WEIXIN -->
		<navBar title="修改资料"></navBar>
		<!-- #endif -->
		<view class="Content" v-if="listData.length">

			<block v-for="(item,index) in listData" :key="index">
				<view class="list">
					<view class="Title" v-if="item.name">{{item.name}}</view>
					<block v-for="(sItem,sIndex) in item.list" :key="sIndex">
						<view class="headBox flexac" v-if="sItem.vpType == 7">
							<view class="v_head m-top50 m-bot20" @click="UploadImg(index,sIndex)">
								<image :src="$imgUrls(sItem.value)" mode="aspectFill" class="wh"></image>
								<view class="changeHead">更换{{sItem.vpName}}</view>
							</view>
						</view>

						<view class="Li bot" v-if="sItem.vpType == 1">
							<text class="Li_title">{{sItem.vpName}}</text>
							<input type="text" class="Li_contentInput" v-model="sItem.value"
								:placeholder="`请输入${sItem.vpName}`" @blur="changVal($event,sItem)" />
							<view class="iconfont icon-a-zujian7 color_cc h6"></view>
						</view>

						<picker mode="selector" :range="sItem.vpValue" :value="sItem.arrIndex"
							@change="Picker($event,index,sIndex,sItem)" class="LiPick" v-if="sItem.vpType == 2">
							<view class="Li bot">
								<text class="Li_title">{{sItem.vpName}}</text>
								<view class="Li_content">{{sItem.value?sItem.value:'请选择'}}</view>
								<view class="iconfont icon-a-zujian7 color_cc h6"></view>
							</view>
						</picker>

						<view class="rows bot" v-if="sItem.vpType == 3">
							<view class="Li">
								<text class="Li_title">{{sItem.vpName}}</text>
								<input type="text" class="Li_contentInput" v-model="sItem.value"
									:placeholder="`请输入${sItem.vpName}`" @blur="changVal($event,sItem)" />
								<view class="iconfont icon-a-zujian7 color_cc h6"></view>
							</view>
						</view>

						<view class="row f-column p-bot20" v-if="sItem.vpType == 4">
							<text class="Li_title m-top20">{{sItem.vpName}}</text>
							<view class="row">
								<view class="pecul" v-for="(pItem,pIndex) in sItem.value.split(',')" :key="pIndex">
									{{pItem}}
								</view>
								<view class="addPecul" @click.stop="PopMore(index,sIndex)">
									<view class="iconfont icon-tianjia h6 white"></view>
								</view>
							</view>
						</view>

						<picker mode="date" @change="Picker($event,index,sIndex,sItem)" class="LiPick"
							v-if="sItem.vpType == 5">
							<view class="Li bot">
								<text class="Li_title">{{sItem.vpName}}</text>
								<view class="Li_content">{{sItem.value?sItem.value:'请选择'}}</view>
								<view class="iconfont icon-a-zujian7 color_cc h6"></view>
							</view>
						</picker>

						<view class="Li bot" @click="showAddPicker(index,sIndex,sItem)" v-if="sItem.vpType == 6">
							<text class="Li_title">{{sItem.vpName}}</text>
							<view class="Li_content">{{sItem.value?sItem.value:'请选择'}}</view>
							<view class="iconfont icon-a-zujian7 color_cc h6"></view>
						</view>

						<view class="Photos" v-if="sItem.vpType == 8">
							<view class="row">
								<view class="rowList" v-for="(imgItem,Imgindex) in sItem.value" :key="Imgindex">
									<view class="LitImg" @click="$ImageNum(Imgindex,sItem.value)">
										<image :src="$imgUrls(imgItem)" mode="aspectFill" class="wh bor_radius_10">
										</image>
										<view class="iconfont icon-shanchu1 color size46"
											@click.stop="DelImg(index,sIndex,Imgindex)">
										</view>
									</view>
								</view>
								<view class="rowList" @click="UploadPhoto(index,sIndex)" v-if="sItem.value.length < 9">
									<view class="LitImg flexac">
										<view class="iconfont icon-tianjia color_f2 size100"></view>
									</view>
								</view>
							</view>
						</view>

					</block>

				</view>







			</block>
		</view>


		<view v-if="show">
			<u-popup :show="show" @close="close" round="10">
				<view class="PopUp">
					<text class="row j-centert black size32 bold">{{pageData[Index].vpName}}</text>
					<view class="row m-top30 p-bot50">
						<block v-for="(item,index) in pageData[Index].vpValue" :key="index">
							<view class="popList" @click.stop="selectINT(item)"
								:class="{'popActive':pageData[Index].value.indexOf(item) != -1}">{{item}}</view>
						</block>
					</view>
				</view>
			</u-popup>
		</view>

		<Load v-if="!listData.length"></Load>

	</view>

	<cityPicker :column="3" :default-value="defaultValue" :mask-close-able="true" @confirm="confirm"
		@cancel="visible = false" :visible="visible" />
</template>

<script setup>
	import cityPicker from '@/components/cityPicker/cityPicker.vue'
	import { ref, inject, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import Http from '@/common/request.js';
	import common from '@/common/common.js';


	const { Toast, imgUrls: $imgUrls, } = inject('Utils');
	const show = ref(false);
	const defaultValue = ref('110101');
	const visible = ref(false);
	const pageData = ref([]);
	const listData = ref([]);
	const Index = ref(0);
	const showadd = ref([]);


	onLoad(() => {
		user_edit_info();
	})

	const user_edit_info = () => {
		Http.get({
			url: '/WeddingApi/user_edit_info',
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			const result = res.data.list;
			result.forEach(item => {
				if (item.list) {
					item.list.forEach(sItem => {
						if (sItem.vpType == 2 && sItem.value) {
							sItem.arrIndex = sItem.vpValue.findIndex(n => n == sItem.value);
						}
						if (sItem.vpType == 4) {
							sItem.valueList = sItem.value.split(',');
						}
					})
				}
			})
			listData.value = result;
		})
	}

	const changVal = (e, item) => {
		if (!e.detail.value) return;
		edit_base_info(item);
	}

	const Picker = (e, index, sIndex, sItem) => {
		let every = e.detail.value;
		if (sItem.vpType == 2) listData.value[index].list[sIndex].value = listData.value[index].list[sIndex].vpValue[
			every];
		if (sItem.vpType == 5) listData.value[index].list[sIndex].value = every;

		edit_base_info(sItem);
	}


	const showAddPicker = (index, sIndex, sItem) => {
		showadd.value = [index, sIndex];
		if (sItem.code) defaultValue.value = sItem.code;
		visible.value = true;
	}


	const confirm = (e) => {
		visible.value = false;
		listData.value[showadd.value[0]].list[showadd.value[1]].value = e.name;
		listData.value[showadd.value[0]].list[showadd.value[1]].code = e.code;
		const result = listData.value[showadd.value[0]].list[showadd.value[1]];
		edit_base_info(result);
	}

	const UploadImg = (index, sIndex) => {
		uni.chooseImage({
			count: 1,
			success(res) {
				const tempFilePaths = res.tempFilePaths[0];
				// #ifdef MP-WEIXIN
				wx.cropImage({
					src: tempFilePaths,
					cropScale: '1:1',
					success(res2) {
						uploadFile(res2.tempFilePath, index, sIndex);
					},
				})
				// #endif
				// #ifdef H5
				uploadFile(tempFilePaths, index, sIndex);
				// #endif
			},
		})
	}



	const uploadFile = (tempFilePath, index, sIndex) => {
		common.uploadFile(tempFilePath).then(res => {
			listData.value[index].list[sIndex].value = res.url.substring(22, res.url.length);
			edit_base_info(listData.value[index].list[sIndex]);
		})
	}


	const UploadPhoto = async (index, sIndex) => {
		const result = listData.value[index].list[sIndex];
		let num = 9 - result.value.length;
		const Photo = await common.chooseImage(num);
		if (!Photo.length) return;
		listData.value[index].list[sIndex].value = [...result.value, ...Photo];
		edit_base_info(listData.value[index].list[sIndex]);
	}


	const DelImg = (index, sIndex, Imgindex) => {
		listData.value[index].list[sIndex].value.splice(Imgindex, 1);
		edit_base_info(listData.value[index].list[sIndex]);
	}

	const PopMore = (index, sIndex) => {
		pageData.value = listData.value[index].list;
		Index.value = sIndex
		show.value = true;
	}


	const selectINT = (item) => {
		const result = pageData.value[Index.value];
		const Flag = result.valueList.includes(item);
		if (Flag) {
			let soury = result.valueList.findIndex((n) => n == item);
			result.valueList.splice(soury, 1)
		} else {
			result.valueList.push(item)
		}
		result.value = result.valueList.join(',')
	}

	const close = () => {
		edit_base_info(pageData.value[Index.value]);
		show.value = false;
	}

	const edit_base_info = (item) => {
		const Data = [item];
		Http.post({
			url: '/WeddingApi/edit_base_info',
			data: {
				property: JSON.stringify(Data)
			}
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
		})
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.Content {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list {
		width: 690rpx;
		margin: 0 auto 24rpx auto;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.Title {
		position: relative;
		padding-left: 24rpx;
		color: #000;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.Title::after {
		content: '';
		width: 8rpx;
		height: 36rpx;
		background-color: $themeColor;
		border-radius: 4rpx;
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
	}

	.contcat {
		color: $themeColor;
		border: 1px solid $themeColor;
		border-radius: 30rpx;
		padding: 4rpx 20rpx;
		font-size: 20rpx;
	}

	.headBox {
		width: 100%;

	}

	.v_head {
		width: 300rpx;
		height: 300rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		transform: translateY(0);
	}

	.changeHead {
		background-color: $themeColor;
		padding: 4rpx 12rpx;
		color: #ffffff;
		font-size: 20rpx;
		position: absolute;
		top: 4rpx;
		right: 4rpx;
		border-radius: 20rpx;
	}

	.LiPick {
		width: 100%;
		height: 88rpx;
	}

	.Li {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;

	}

	.Li_title {
		color: #333;
		font-size: 30rpx;
	}

	.Li_content {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #333;
		font-size: 30rpx;
		text-align: right;
	}

	.Li_contentInput {
		flex: 1;
		height: 100%;
		color: #333;
		font-size: 30rpx;
		text-align: right;
	}

	.icon-a-zujian7 {
		padding-left: 10rpx;
	}

	.Photos,
	.textarea {
		width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		position: relative;
		box-sizing: border-box;
	}

	.rowList {
		width: 30%;
		margin-right: 4.8%;
	}

	.rowList:nth-child(3n) {
		margin-right: 0;
	}

	.LitImg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		position: relative;
	}

	.LitImg::after,
	.textarea_txt::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #cccccc;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: left top;
		-webkit-transform-origin: left top;
		border-radius: 20rpx;
	}

	.icon-shanchu1 {
		position: absolute;
		background-color: #ffffff;
		top: -12rpx;
		right: -12rpx;
		z-index: 10;
		border-radius: 50%;
	}

	.TipBox {
		width: 690rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #fef1f8;
		color: #e29ab1;
		font-size: 22rpx;
	}

	.pecul {
		padding: 0 20rpx;
		height: 46rpx;
		border-radius: 30rpx;
		background-color: #ff8d44;
		color: #ffffff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}

	.addPecul {
		padding: 0 30rpx;
		height: 46rpx;
		background-color: #ff8d44;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: #ffffff;
	}

	.popList {
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		background-color: #f2f2f2;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.popActive {
		color: #ffffff;
		background-color: #ff8d44;
	}

	.PopUp {
		width: 100%;
		padding: 30rpx 0 40rpx 0;
		display: flex;
		flex-direction: column;
	}
</style>